<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>University Educator</title>
		<script type="text/javascript" src="../js/d3.js"></script>
		<script type="text/javascript" src="../js/dimple.v2.1.0.js"></script>
		<script type="text/javascript" src="../util/Navigator.js"></script>
		<script src="../js/pace/pace.js"></script>
		<link href="../js/pace/themes/loadingBar.css" rel="stylesheet" />
		<link href="../css/navigator.css" rel="stylesheet"/>
		
		<style type="text/css">
        body {
            text-align: center;
            font: 10px sans-serif;
            margin: 0;
        }
        svg {
            font: 10px sans-serif;
        }
        .header {
            font: 15px sans-serif;
        }
    </style>
	</head>
	<body>
		<div id="header" style="position: fixed;width: 100%;background-color: rgb(255,255,255);"></div>
		<div id="navigator" style="position: fixed;width: 100%;top: 42px;background-color: rgb(255,255,255);"></div>
		
		<script type="text/javascript">
			var navi1,navi2;
			d3.json("../STF004Controller",function(error,data){
				var header = d3.select("#header").attr("class","header");
				header.html("<a href='../index.html'><img src='../images/home_icon.png'></a> รายงานอาจารย์ มหาวิทยาลัยราชภัฏ รำไพพรรณี  ");
						//"<input type=\"radio\" name=\"radioType\" value=\"barGraph\" id=\"radio\" checked=\"checked\">bar"+
						//"<input type=\"radio\" name=\"radioType\" value=\"lineGraph\" id=\"radio\">line");
				var root = {"name":"จำนวนอาจารย์แยกตามคณะ",
						"children":[{"name":"ระดับการศึกษา"}]
				};
				navigator("navigator", root);		
				var navi = d3.select("#navigator").selectAll("g.node").selectAll("circle");
				navi.forEach(function(d,i){
					if(i==0){
						navi1 = d[0];
					}else{
						navi2 = d[0];
					}
				});
				navi1.style.fill = "rgb(176,196,222)";
				
				d3.select("body").append("div").attr("id","barGraph1");
				var svg = dimple.newSvg("#barGraph1", 590, 650);
				var myChart = new dimple.chart(svg, data);
				myChart.setBounds(60, 100, 510, 330)
				var x = myChart.addCategoryAxis("x", "departmentName");
				var y = myChart.addMeasureAxis("y", "amount");
				var mySeries = myChart.addSeries(null, dimple.plot.bar);
				
				mySeries.addEventHandler("click", onClick);
				
				mySeries.getTooltipText = function(e) {
                    return [
                        "คณะ: " + e.x,
                        "จำนวนอาจารย์: " + e.y
                    ];
                };
				
				x.title = "คณะ";
				y.title = "จำนวนอาจารย์";
				
				myChart.draw(600);
				x.shapes.selectAll("text").attr("transform", "rotate(45)");
				
				function onClick(e){
					var depId;
					data.some(function(d,i){
						if(d.departmentName.localeCompare(e.xValue)==0){
							depId = d.departmentId;
						}
					});
					
					firstDrilldown1(depId);
					/* if(document.querySelector('input[name="radioType"]:checked').value === "barGraph"){
						firstDrilldown1(depId);
					}else{
						firstDrilldown2(depId);
					} */
					
				};
			})//end d3.json;
			
			function firstDrilldown1(depId){
				removeDiv("barGraph2");
				removeDiv("end");
				navi2.style.fill = "rgb(176,196,222)";
				d3.json("../STF004Controller?depId="+depId,function(error,data){
					var data2 = d3.nest()
					.key(function(d,i){
						return d.acadTypeCode
					}).entries(data);
					d3.select("body").append("div").attr("id","barGraph2").attr("style","width:2000px;margin-left:auto;margin-right:auto;");
					data2.forEach(function(d,i){
						var text = d.values[0].departmentName +"  "+"ตำแหน่งทางวิชาการ "+d.values[0].acadtypeName+"<br/>";
						
						d3.select("#barGraph2").append("div").attr("id","div"+i).attr("style","display:inline-block;").attr("class","header").html(text);
						
						var divName = "#div"+i; 
						var svg = dimple.newSvg(divName, 590, 450);
						var myChart = new dimple.chart(svg, d.values);
						myChart.setBounds(60, 50, 530, 330)
						var x = myChart.addCategoryAxis("x", ["degreeLevelName", "status"]);
						var y = myChart.addMeasureAxis("y", "amount");
						x.title = "ระดับการศึกษา";
						y.title = "จำนวน";
						x.addOrderRule("degreeLevelName","desc");
						var chart = myChart.addSeries("status", dimple.plot.bar);
						
						chart.getTooltipText = function(e) {
		                     return [
		                         "ระดับการศึกษา: " + e.x,
		                         "จำนวน: " + e.y,
		                         "สถานะ: "+ e.aggField[0]
		                     ];
		                 };
						
						var myLegend = myChart.addLegend(65, 10, 510, 20, "right");
						myChart.draw(600);
					});
					d3.select("body").append("div").attr("id","end");
					goToAnchor("end");
				});//end d3.json
			}//end firstDrilldown1
			
			function firstDrilldown2(depId){
				console.log(depId);
			}
			
			function removeDiv(divName){
	        	if(document.getElementById(divName)!=null){
	        		document.getElementById(divName).remove();
	        	}
	        }
			
			function goToAnchor(name) {
	            document.getElementById(name).scrollIntoView(true);
	        }
			
		</script>
	</body>
</html>